@alert-prefix-cls: ~"@{css-prefix}alert";
@icon-prefix-cls: ~"@{css-prefix}icon";

.@{alert-prefix-cls}{
    position: relative;
    padding: 8px 48px 8px 16px;
    // border-radius: @border-radius-small;
    color: @color-complementary-1;
    font-size: @font-size-base;
    line-height: 17px;
    margin-bottom: 10px;

    &&-with-icon{
        padding: 8px 48px 8px 38px;
    }

    &-icon {
        position: absolute;
        margin-top: -11.5px;
        top: 18px;
        left: 12px;
        font-size: @font-size-large;
    }

    &-coll {
        color: @color-brand-primary;
        cursor: pointer;
    }

    &-desc {
        font-size: @font-size-base;
        color: @text-color;
        line-height: 21px;
        display: none;
        text-align: justify;
    }

    &-success {
        // border: @border-width-base @border-style-base @color-border-message-success;
        background-color: @alert-bg-success;
        .@{alert-prefix-cls}-icon {
            color: @success-color;
        }
    }

    &-info {
        // border: @border-width-base @border-style-base @color-border-message-info;
        background-color: @alert-bg-info;
        .@{alert-prefix-cls}-icon {
            color: @alert-icon-info;
        }
    }

    &-warning {
        // border: @border-width-base @border-style-base @color-border-message-warning;
        background-color: @alert-bg-warning;
        .@{alert-prefix-cls}-icon {
            color: @alert-icon-warning;
        }
    }

    &-error {
        // border: @border-width-base @border-style-base @color-border-message-error;
        background-color: @alert-bg-fail;
        .@{alert-prefix-cls}-icon {
            color: @error-color;
        }
    }

    &-close {
        .content-close(0);
        color: @color-complementary-5;
        &:hover{
          color: @color-complementary-5;
        }
        i {
          vertical-align: 0;
        }
    }

    &-with-desc {
        padding: 16px;
        // position: relative;
        // border-radius: @border-radius-small;
        // margin-bottom: 10px;
        color: @text-color;
        // line-height: 1.5;
    }

    &-with-desc&-with-icon {
        // padding: 8px 47px 23px 39px;
    }

    &-with-desc &-desc{
        display: block;
    }

    &-with-desc &-message {
        // font-size: @font-size-large;
        // color: @title-color;
        // display: block;
        // margin-bottom: 4px;
    }

    &-line-space {
        line-height: 21px;
    }

    &-with-desc &-icon {
        // top: 50%;
        // top: 19px;
        // left: 12px;
        // margin-top: -24px;
        // font-size: 24px;
    }

    &-with-banner{
        border-radius: 0;
    }
}
